<template>
	<view>
		<view class="status_bar">
		    <!-- 这里是状态栏 -->
		</view>
		<!-- <uni-nav-bar  title="个人中心">
			<view slot="right" class="nav-bar-right flexCol">
				<view class="iconfont icon-kefu"></view>
				<text>客服</text>
			</view>
		</uni-nav-bar> -->
		<view class="custom_bar flexRow">
			<view class="custom_bar_right flexCol" style="visibility: hidden;">
				<view class="iconfont icon-kefu"></view>
				<text>客服</text>
			</view>
			<view class="custom_bar_center">
				个人中心
			</view>
			<navigator open-type="switchTab" url="/pages/message/message" class="custom_bar_right flexCol">
				<view class="iconfont icon-kefu"></view>
				<text>客服</text>
			</navigator>
		</view>
		<view class="user_info flexRow">
			<image class="user_img" :src="user.avatar || '/static/img/user.png'"></image>
			<view class="user_detail">
				<view class="user_name">
					{{user.nickname || '用户名'}}
				</view>
				<view class="user_num">
					<text class="user_id">邀请码：{{user.invite_code || '用户邀请码'}}</text> <text class="user_id_clipboard" @tap="copyId">复制</text>
				</view>
			</view>
		</view>
		<view class="balance_wrapper">
			<view class="balance flexRow">
				<view class="balance_left">
					<view class="balance_title">可提现余额</view>
					<view class="balance_num flexRow">
						<view class="balance_num_left">{{user.balance/config.integral_ratio || '0'}}元</view>
						<view class="balance_num_right flexRow">
							<image class="balance_num_right_img" src="/static/img/integral.png" mode=""></image>
							{{user.balance || '0'}}积分
						</view>
					</view>
				</view>
				<view class="balance_right flexRow">
					<navigator class="balance_btn" url="/pages/withdrawDeposit/withdrawDeposit">
						立即提现
					</navigator>
				</view>
			</view>
		</view>
		<!-- <view class="fn_item">
			<view class="fn_content flexRow" @tap="bindPhone">
				<view class="fn_content_left flexRow">
					<image class="phone_img" src="/static/img/phone.png" mode=""></image>
				</view>
				<view class="fn_content_center">
					绑定手机
				</view>
				<view class="fn_content_right">
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view> -->
		<view class="fn_item">
			<navigator class="fn_content flexRow" url="/pages/bindAli/bindAli">
					<view class="fn_content_left flexRow">
						<image class="lable_img" src="/static/img/alipay.png" mode=""></image>
					</view>
					<view class="fn_content_center">
						绑定支付宝
					</view>
					<view class="fn_content_right">
						<view class="iconfont icon-right"></view>
					</view>
			</navigator>
			
		</view>
		<view class="fn_item">
			<navigator class="fn_content flexRow" url="/pages/agentDetail/agentDetail">
				<view class="fn_content_left flexRow">
					<image class="personal_img" src="/static/img/personal.png" mode=""></image>
				</view>
				<view class="fn_content_center">
					代理明细
				</view>
				<view class="fn_content_right">
					<view class="iconfont icon-right"></view>
				</view>
			</navigator>
			
		</view>
		<view class="fn_item">
			<navigator class="fn_content flexRow" url="/pages/incomeDetail/incomeDetail">
				<view class="fn_content_left flexRow">
					<image class="lable_img" src="/static/img/money.png" mode=""></image>
				</view>
				<view class="fn_content_center">
					收入明细
				</view>
				<view class="fn_content_right">
					<view class="iconfont icon-right"></view>
				</view>
			</navigator>
		</view>
		<view class="fn_item">
			<view class="fn_content flexRow" @tap="checkOut">
				<view class="fn_content_left flexRow">
					<image class="lable_img" src="/static/img/exit.png" mode=""></image>
				</view>
				<view class="fn_content_center">
					退出登录
				</view>
				<view class="fn_content_right">
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>
		<view class="app_info">
			当前版本号  {{appInfo.version}}
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import request from '../../apiRequest/request.js'
	export default {
		data() {
			return {
				user: {},
				config: {},
				appInfo: {}
			}
		},
		onShow() {
			this.appInfo = uni.getStorageSync('appInfo')
			request.userInfo().then(res=>{
				console.log(res)
				uni.setStorageSync('user', res.data.userInfo)
				uni.setStorageSync('config', res.data.config)
				this.config = res.data.config
				this.user = res.data.userInfo
				
			}).catch(err=>{
				this.$unexpected(err)
			})
		},
		methods: {
			bindPhone(){
				uni.showToast({
				    title: '该功能暂未开放',
					icon: 'none',
				    duration: 2000
				})
			},
			toPage(path){
				uni.navigateTo({
					url: path
				})
			},
			copyId(){
				uni.setClipboardData({
				    data: this.user.id,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			checkOut(){
				uni.showModal({
				    title: '',
				    content: '确认退出登录？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/login/login'
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
.custom_bar_right .icon-kefu{
	color: #2C405A;
}
.custom_bar_center{
	text-align: center;
	font-size:34rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(49,49,49,1);
	line-height:54rpx;
}
.user_info{
	padding: 30rpx 0;
}
.user_img{
	width: 130rpx;
	height: 130rpx;
	border-radius: 50%;
	margin: 0 40rpx;
}
.user_detail{
	padding-top: 20rpx;
}
.user_name{
	font-size:38rpx;
	line-height: 38rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(49,49,49,1);
	margin-bottom: 20rpx;
}
.user_num{
	line-height: 24rpx;
}
.user_id{
	font-size:24rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(49,49,49,1);
}
.user_id_clipboard{
	font-size:24rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(116,120,124,1);
	padding: 0 20rpx;
	text-decoration: underline;
}
.balance_wrapper{
	padding: 0 20rpx;
}
.balance{
	width: 100%;
	min-height: 200rpx;
	background:linear-gradient(0deg,rgba(4,137,255,1),rgba(145,202,255,1));
	box-shadow:0px 2px 10px 0px rgba(10,93,174,0.5);
	border-radius:10px;
	justify-content: space-between;
	margin-bottom: 30rpx;
}
.balance_left{
	padding-top: 30rpx;
	padding-left: 40rpx;
}
.balance_title{
	font-size:32rpx;
	line-height: 32rpx;
	margin-bottom: 36rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
}
.balance_num{
	align-items: flex-end;
}
.balance_num_left{
	font-size:56rpx;
	line-height: 56rpx;
	font-family:Source Han Sans SC;
	font-weight:800;
	color:rgba(255,255,255,1);
	margin-right: 20rpx;
}
.balance_num_right{
	font-size:28rpx;
	line-height: 28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,202,26,1);
	align-items: center;
}
.balance_right{
	align-items: center;
}
.balance_btn{
	width: 180rpx;
	height: 60rpx;
	background: #fff;
	border-radius: 10rpx;
	margin-right: 26rpx;
	font-size:32rpx;
	text-align: center;
	line-height: 60rpx;
	color: #007AFF;
}
.fn_item{
	padding: 0 20rpx;
	border-bottom: 2rpx solid rgba(238,238,238,1);
	height: 100rpx;
	display: flex;
	align-items: center;
}
.fn_content{
	width: 100%;
	align-items: center;
}
.fn_content_right>.iconfont{
	font-size: 60rpx;
	color: #CACACA;
}
.fn_content_center{
	flex:1;
	font-size:34rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(51,51,51,1);
}
.phone_img{
	width: 31rpx;
	height: 47rpx;
}
.lable_img{
	width: 47rpx;
	height: 47rpx;
}
.fn_content_left{
	align-items: center;
	justify-content: center;
	width: 70rpx;
}
.fn_content_left image{
	display: block;
}
.personal_img{
	width: 44rpx;
	height: 49rpx;
}
.balance_num_right_img{
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.app_info{
	position: absolute;
	bottom: 40rpx;
	width: 100%;
	font-size: 28rpx;
	color: #C0C0C0;
	text-align: center;
}
</style>
